<div class="modal fade" id="change-picture-modal" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title"><i class="fa fa-edit"></i> Change Picture Profile</h4>
			</div>
			<form action="<?php echo base_url(); ?>control-authors/change-picture" method="post" enctype="multipart/form-data" onsubmit="return Checkfiles()">
				<div class="modal-body">
					<div class="form-group">
						<div class="input-group">
							<span class="input-group-addon"><i class="fa fa-picture-o"></i></span>
							<input name="userfile" type="file" id="userfile" class="form-control">
						</div>
						<p class="help-block" id="error_upload"></p>
					</div>

				</div>
				<div class="modal-footer clearfix">

					<button type="button" class="btn btn-danger" data-dismiss="modal">
						<i class="fa fa-times"></i> Discard
					</button>

					<button type="submit" class="btn btn-primary pull-left">
						<i class="fa fa-edit"></i> Change Picture
					</button>
				</div>
			</form>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script>
	function Checkfiles() {
		var fup = document.getElementById('userfile');
		var fileName = fup.value;
		if (fileName == "") {
			document.getElementById('error_upload').innerHTML = "Upload image file is required";
			return false;
		}
		var ext = fileName.substring(fileName.lastIndexOf('.') + 1);
		if (ext == "gif" || ext == "GIF" || ext == "JPEG" || ext == "jpeg" || ext == "jpg" || ext == "JPG") {
			return true;
		} else {
			document.getElementById('error_upload').innerHTML = "Upload Gif or Jpg images only";

			fup.focus();
			return false;
		}
	}
</script>

